<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字轮播</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            box-sizing: border-box;
        }

        .main {
            width: 1200px;
            margin: auto;
        }

        .swiper-box {
            position: relative;
            height: 24px;
            width: 400px;
            margin: auto;
            overflow: hidden;
        }

        .swiper-list {
            height: 100%;
            display: flex;
        }

        .swiper-list>li {
            height: 100%;
            width: 400px;
            background-size: cover;
        }

        .swiper-box>span {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            padding: 5px;
            color: #fff;
            background-color: rgba(123, 123, 123, 0.5);
            cursor: pointer;
        }

        .swiper-box>span:nth-of-type(1) {
            left: 0px;
            border-radius: 0px 50% 50% 0px;
            padding-right: 10px;
        }

        .swiper-box>span:nth-of-type(2) {
            right: 0px;
            border-radius: 50% 0px 0px 50%;
            padding-left: 10px;
        }

        .swiper-nav {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%, 0px);
            background-color: rgba(255, 255, 255, 0.5);
            display: flex;
            justify-content: space-between;
            border-radius: 10px;
            height: 12px;
            padding: 2px;
        }

        .swiper-nav>li {
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
        }

        .swiper-nav>.select-li {
            background-color: #f55;
        }
    </style>
</head>

<body>
    <main class="main">
        <div class="swiper-box">
            <ul class="swiper-list">

            </ul>
        </div>
    </main>
</body>
<script>

    // 目前显示的索引
    let index = 0;
    let ul = document.querySelector(".swiper-list");
    let intervalId = null;
    let arr = [];
    let lis = [];

    function handleLoad() {
        let oAjax;
        //如果有XMLHttpRequest，那就是非IE6浏览器。()里面加window的原因下面会有描述。
        if (window.XMLHttpRequest) {
            oAjax = new XMLHttpRequest();//创建ajax对象
            //如果没有XMLHttpRequest，那就是IE6浏览器
        } else {
            //IE6浏览器创建ajax对象
            oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //2.连接服务器
        //open(方法、文件名、异步传输）
        //方法：
        //传输方式是get方式还是post方式。
        //文件名
        //告诉服务器要读哪个文件
        //异步传输
        //异步：多件事一件一件的做
        //同步：多件事情一起进行
        //但是js里面的同步和异步和现实的同步异步相反。
        //同步：多件事一件一件的做
        //异步：多件事情一起进行
        //ajax天生是用来做异步的
        oAjax.open("GET", "http://127.0.0.1:5500/%E8%BD%AE%E6%92%AD%E5%9B%BE/text.json", true);

        //3.发送请求括号内可以传参数
        oAjax.send();

        //4.接收返回
        //客户端和服务器端有交互的时候会调用onreadystatechange
        oAjax.onreadystatechange = function () {
            //oAjax.readyState  //浏览器和服务器，进行到哪一步了。
            //0->（未初始化）：还没有调用 open() 方法。
            //1->（载入）：已调用 send() 方法，正在发送请求。
            //2->载入完成）：send() 方法完成，已收到全部响应内容。
            //3->（解析）：正在解析响应内容。
            //4->（完成）：响应内容解析完成，可以在客户端调用。
            if (oAjax.readyState == 4) {
                // 判断是否成功,如果是200，就代表成功
                if (oAjax.status == 200) {
                    // 获取内容
                    let jsonStr = oAjax.responseText;
                    // 反序列化
                    let obj = JSON.parse(jsonStr);
                    // 获取内容列表
                    arr = obj.result_data;

                    doInit();
                } else {
                    console.log("失败");
                }
            }
        };
    }

    // 初始化
    function doInit() {
        // 设置ul的宽度
        ul.style.width = `${arr.length * 400}px`;

        arr.forEach(v => {
            // 创建图片
            let li = document.createElement("li");
            li.innerText = v;
            ul.appendChild(li);
        })
        lis = ul.getElementsByTagName("li");

        intervalId = setInterval(() => doMove(1), 3000);
    }

    function doMove() {
        if (ul.style.transform == 'translateX(-400px)') {
            ul.style.transition = null;
            ul.style.transform = 'translateX(0)';
            ul.appendChild(lis[0]);
        } else {
            ul.style.transition = '1s'
            ul.style.transform = 'translateX(-400px)'
        }
        // ul.style.transform = `translate(${-(index * 400)}px,0px)`;
    }

    let swiperBox = document.querySelector(".swiper-box");
    swiperBox.addEventListener("mouseover", () => {
        if (intervalId) {
            clearTimeout(intervalId);
        }
    });

    swiperBox.addEventListener("mouseleave", () => {
        intervalId = setInterval(() => doMove(1), 3000);
    });

    // 直接加载数据
    handleLoad();
</script>

</html>